<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>金果演示</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no, email=no" />

	<link href="css/iSlider.css" rel="stylesheet">
	{literal}
	<style>
		body {
			margin: 0;
			padding: 0;
			background: #333;
			overflow: hidden;
		}

		/*ul wrapper*/
		#iSlider-wrapper {
			height: 100%;
			width: 100%;
			overflow: hidden;
			position: absolute;
		}

		#iSlider-wrapper ul {
			list-style: none;
			margin: 0;
			padding: 0;
			height: 100%;
			overflow: hidden;
		}

		#iSlider-wrapper li {
			position: absolute;
			margin: 0;
			padding: 0;
			height: 100%;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-pack: center;
			-webkit-box-align: center;
			list-style: none;
		}

		#iSlider-wrapper li img {
			max-width: 100%;
			max-height: 100%;
		}
	</style>
	{/literal}
</head>
<body>

	<div id="iSlider-wrapper"></div>

	<script type="text/javascript" src="js/iSlider.js"></script>
	<script type="text/javascript" src="js/iSlider.plugin.zoompic.js"></script>
<script type="text/javascript">
	{literal}
    var list = [
		{content: "img/1.jpg"},
		{content: "img/2.png"},
		{content: "img/3.png"},
		{content: "img/4.png"},
		{content: "img/5.png"},
		{content: "img/6.png"},
		{content: "img/7.jpg"},
		{content: "img/8.png"},
		{content: "img/9.jpg"},
		{content: "img/10.png"},
		{content: "img/11.png"},
		{content: "img/12.png"},
		{content: "img/13.png"},
		{content: "img/14.png"},
    ];

    var S = new iSlider({
        dom: document.getElementById('iSlider-wrapper'),
        data: list,
        isLooping: 1,
        isOverspread: false,
        fixPage:false,
        animateTime: 800, // ms
        plugins: [['zoompic', {zoomFactor: 3}]]
    });
    {/literal}
</script>

</body>
</html>